<template>
  <div class="box">
    <div class="box2">
      <div class="main">
        <div class="main_pc">
          <div class="tit">在电脑上听</div>
          <img
            src="../../assets/image/pc.png"
            alt=""
          >
          <div class="tip">
            <span class="mac"></span>
            <span class="window"></span>
          </div>
          <div class="btn">下载电脑端</div>
        </div>
        <div class="main_phone">
          <div class="tit">在手机上听</div>
          <img
            src="../../assets/image/phone.png"
            alt=""
          >
          <div class="tip">
            <span class="mac"></span>
            <span class="window"></span>
          </div>
          <div class="btn">下载手机端</div>
        </div>
      </div>
      <div class="other"><i class="iconfont"></i> 其他操作系统客户端</div>
      <div class="fixeddown">
        <img src="https://p1.music.126.net/wCRnpjXHpGRiq1c1uCkIFQ==/109951164246717547.png">
        <p>扫描二维码下载</p>
      </div>
    </div>

  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.box {
  min-height: 700px;
  margin-top: 5px;
  background-color: rgb(34, 34, 34);
  .box2 {
    width: 1100px;
    margin: 0 auto;
    padding: 80px 0px 112px;
    position: relative;
    .main {
      display: flex;

      .main_pc {
        display: inline-block;
        width: 556px;
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .tit {
          margin-bottom: 23px;
          font-size: 22px;
          color: #ffffff;
        }
        img {
          width: 464px;
          height: 273px;
        }
        .tip {
          width: 100%;
          height: 44px;
          margin: 20px auto;
          .mac {
            display: inline-block;
            width: 154px;
            height: 44px;
            background-image: url(../../assets/image/MACApp.png);
            background-size: contain;
            margin-right: 40px;
          }
          .window {
            display: inline-block;
            // padding-left: 40px;
            width: 140px;
            height: 44px;
            background-image: url(../../assets/image/WindowApp.png);
            background-size: contain;
          }
        }
        .btn {
          width: 300px;
          height: 65px;
          margin: 0 auto;
          border-radius: 65px;
          background-color: #fff;
          color: #d10000;
          font-size: 22px;
          line-height: 65px;
          text-align: center;
          cursor: pointer;
          box-sizing: content-box;
        }
      }
      .main_phone {
        display: inline-block;
        margin-left: 220px;
        width: 300px;
        height: 100%;
        text-align: center;
        .tit {
          margin-bottom: 23px;
          font-size: 22px;
          color: #ffffff;
        }
        img {
          width: 246px;
          height: 273px;
        }
        .tip {
          width: 100%;
          height: 44px;
          margin: 20px auto;
          .mac {
            display: inline-block;
            width: 120px;
            height: 44px;
            background-image: url(../../assets/image/macphone.png);
            background-size: contain;
            margin-right: 40px;
          }
          .window {
            display: inline-block;
            // padding-left: 40px;
            width: 120px;
            height: 44px;
            background-image: url(../../assets/image/ardphone.png);
            background-size: contain;
          }
        }
        .btn {
          width: 300px;
          height: 65px;
          margin: 0 auto;
          border-radius: 65px;
          background-color: #fff;
          color: #d10000;
          font-size: 22px;
          line-height: 65px;
          text-align: center;
          cursor: pointer;
          box-sizing: content-box;
        }
      }
    }
    .other {
      position: absolute;
      top: 30px;
      right: 0;
      font-size: 14px;
      color: #fff;
      .iconfont {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 6px;
        vertical-align: text-bottom;
        background: url(../../assets/image/load.png) 0% 0% / contain no-repeat;
      }
    }
    .fixeddown {
      padding: 16px 18px 9px;
      background: #fff;
      box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
      border-radius: 10px;
      color: #333;
      font-size: 12px;
      text-align: center;
      position: fixed;
      top: 325px;
      right: 25px;
      img {
        width: 100px;
        height: 100px;
      }
      p {
        margin-top: 10px;
      }
    }
  }
}
</style>
